
// @file
// Core styles for Sooper Easy grid system.
// Author: Jurriaan Roelofs
// Licensed under GPL and MIT


@import "compass/css3";


// The mast is the main container for your layout, feel free to float it left
// or right if you don't like it centered (Default).

.mast {
  width:100%;
  margin-left: auto;
  margin-right: auto;
}


// This class can be used to create full-width footers by putting a full-width
// element as a direct child of the body element (not inside a .mast)


.fullwidth {
  width:100%;
  float:left;
  clear:both;
  text-align:center;
}

// Grid styles
// We match any element that is classified as a grid unit
*[class|="grid"],
.block{
  @include box-sizing(border-box);
  padding:15px; // This creates a 30px gutter and a 15px half-gutter at the edges of the website
  word-wrap:break-word; // This will only break words if they are so big they otherwise go off the grid
  // For backward compatibility with Arctica 1.x themes
  &.grid-first {
    padding-left:0;
  }
  &.grid-last {
    padding-right:0;
  }
}

// Non-full-width blocks will be floated
*[class|="grid"] {
  position:relative;
  float:left;
  *display:inline;
  // For backward compatibility with Arctica 1.x themes
  &.grid-inner {
    float:none;
  }
}

.clear-both {
  clear:both;
}
.clear-left {
  clear:left;
}
.clear-right {
  clear:right;
}
.clear-none {
  clear:none;
}

.clear {
  clear:both;
  display:block;
  visibility:hidden;
  height:0;
  width:0;
}

.region:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}


// Grid Widths


.grid-100 {width:100%;}
.grid-3-4 {width:75%;} // Read the dash as a slash so 3/4 (3 quarters, or 75%)
.grid-2-3 {width:66.65%;}
.grid-1-2 {width:50%;}
.grid-1-3 {width:33.32%;}
.grid-1-4 {width:25%;}
.grid-1-5 {width:20%;}
.grid-1-6 {width:16.65%;}
.grid-1-7 {width:14.28%;}
.grid-1-8 {width:12.5%;}
.grid-phi {width:61.8%;}
.grid-phi2 {width:38.2%;}
.grid-phi3 {width:23.6%;}
.grid-auto {width:auto;}



// Prefill Styles


.grid-prefill-3-4 {padding-left:75%;}
.grid-prefill-2-3 {padding-left:66.65%;}
.grid-prefill-1-2 {padding-left:50%;}
.grid-prefill-1-3 {padding-left:33.32%;}
.grid-prefill-1-4 {padding-left:25%;}
.grid-prefill-1-5 {padding-left:20%;}
.grid-prefill-1-6 {padding-left:16.65%;}
.grid-prefill-1-7 {padding-left:14.28%;}
.grid-prefill-1-8 {padding-left:12.5%;}
.grid-prefill-phi {padding-left:61.8%;}
.grid-prefill-phi2 {padding-left:38.2%;}
.grid-prefill-phi3 {padding-left:23.6%;}



// Postfill Styles


.grid-postfill-3-4 {padding-right:75%;}
.grid-postfill-2-3 {padding-right:66.65%;}
.grid-postfill-1-2 {padding-right:50%;}
.grid-postfill-1-3 {padding-right:33.32%;}
.grid-postfill-1-4 {padding-right:25%;}
.grid-postfill-1-5 {padding-right:20%;}
.grid-postfill-1-6 {padding-right:16.65%;}
.grid-postfill-1-7 {padding-right:14.28%;}
.grid-postfill-1-8 {padding-right:12.5%;}
.grid-postfill-phi {padding-right:61.8%;}
.grid-postfill-phi2 {padding-right:38.2%;}
.grid-postfill-phi3 {padding-right:23.6%;}


// IE7 & IE6 fill for full-width regions:
// We create an invisible buffer space to prevent layout collapse
// Without this rounding errors may cause floats to drop down a row
// @todo abstract this so that it doesn't target only these regions
.region-preblocks,
.region-postblocks,
.region-header,
.region-subheader
.region-content,
.region-content-top,
.region-content-bottom,
.region-featured,
.region-footer,
.region-footer-extra {
  // *width:100%;
  // Arctica 1.x
  // *margin-right:-10px!important;
  // *padding-right:10px!important;

  // Arctica 2.x
  // *padding-right:2px!important;
}